<template>

<el-card style="margin-top:15px;">
        <el-table @selection-change="selectionChange" :data="props.data" style="width: 100%">

            <el-table-column v-if="props.hasSelection" type="selection" width="55" />
            <el-table-column v-for="item in props.columns" :prop="item.prop" :label="item.label" :width="item.width">

                <template v-if="item.slot" #default="scope">
                    <slot :name="item.slotName" :row="scope.row"></slot>
                </template>

                <template v-if="item.dateFormat" #default="scope">
                    {{ dayjs(scope.row[item.prop!]).format(item.dateFormat) }}
                </template>

                <template v-if="item.isImage" #default="scope">
                    <el-image style="width: 100px; height: 100px" :src="scope.row[item.prop!]" :zoom-rate="1.2"
                        :max-scale="7" :min-scale="0.2" :preview-src-list="[scope.row[item.prop!]]" show-progress
                        :initial-index="4" fit="cover" />
                </template>
            </el-table-column>

        </el-table>
        <div class="page">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                :page-sizes="[100, 200, 300, 400]" layout="total, sizes, prev, pager, next, jumper" :total="props.total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>


</el-card>


</template>

<script lang="ts" setup>
import { defineProps, ref } from 'vue';
import { dayjs } from 'element-plus';
import { defineEmits } from 'vue';

const emits = defineEmits(['selectionChange', 'handleSizeChange', 'handleCurrentChange'])
export interface ColumnType {
    label: string,
    prop?: string,
    slot?: boolean,
    slotName?: string,
    dateFormat?: string,
    isImage?: boolean
    width?: number
}
export interface TableProp {
    hasSelection?: boolean
    data: any;
    total: number
    columns: ColumnType[];
}

const selectionChange = (e: any) => {

    console.log("选择", e);

    emits('selectionChange', e)

}

const currentPage = ref(1);
const pageSize = ref(10);

const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
    pageSize.value = val;
    emits('handleSizeChange', val)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    currentPage.value = val;

    emits('handleCurrentChange', val)
}



const props = defineProps<TableProp>()



</script>
<style scoped>
.page {
    display: flex;
    justify-content: center;
    padding: 30px;
}
</style>